<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script><!--  $(function(){     });  -->

    $(function(){
        $("#cityid").change(function(){
            //alert($(this).val());
            window.location.href='/getWeather?cityid='+$(this).val();
        });

    });
    </script>
    <title>随心行天气</title>
</head>
<body>
<!-- 第一步css，加个罩子 -->
<div class="container">
    <!-- 第二步css，让title和下拉框在一行 -->
    <!-- 展示title -->
    <div class="row">
        <h1 th:text="${title}">随心行天气</h1>
        <!-- 展示城市下拉框 -->
        <select name="cityid" id="cityid">
            <option th:each="city:${cityList}" th:value="${city.cityid}" th:text="${city.city}"
                    th:selected="${city.cityid eq cityid}">
            </option>
        </select>
    </div>
    <h3>今日天气</h3>
    <!-- 展示天气预报数据 -->
    <!-- 当前查询的城市名称 -->
    <p>城市：<span th:text="${weatherdata.result.getAreaid()}"></span></p >
    <p>天气：<span th:text="${weatherdata.result.getWeather()}"></span></p >
</div>
</body>
</html>
